<template>
  <div class="page-container">
    <div class="page-header">
      <h2>📄 内容管理</h2>
      <p>管理网站内容，包括文章、分类和标签</p>
    </div>
    <div class="page-content">
      <el-alert 
        title="内容管理模块" 
        type="success" 
        description="请从左侧菜单选择具体的管理页面。"
        show-icon 
        :closable="false"
      />
      
      <div class="content-modules">
        <router-link to="/content/article" class="module-card">
          <div class="module-icon">✏️</div>
          <div class="module-info">
            <h3>文章管理</h3>
            <p>管理网站文章</p>
          </div>
        </router-link>
        
        <router-link to="/content/category" class="module-card">
          <div class="module-icon">📁</div>
          <div class="module-info">
            <h3>分类管理</h3>
            <p>管理文章分类</p>
          </div>
        </router-link>
        
        <router-link to="/content/tag" class="module-card">
          <div class="module-icon">🏷️</div>
          <div class="module-info">
            <h3>标签管理</h3>
            <p>管理文章标签</p>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script setup>
// 内容管理相关逻辑
</script>

<style scoped>

.page-header {
  margin-bottom: 24px;
}

.page-header h2 {
  font-size: 24px;
  color: #202124;
  margin: 0 0 8px 0;
}

.page-header p {
  color: #5f6368;
  margin: 0;
}

.page-content {
  background: white;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.content-modules {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.module-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: #f8f9fa;
  border: 1px solid #e8eaed;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.module-card:hover {
  background: white;
  border-color: #1a73e8;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.module-icon {
  font-size: 36px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.module-info h3 {
  margin: 0 0 4px 0;
  font-size: 16px;
  color: #202124;
  font-weight: 600;
}

.module-info p {
  margin: 0;
  font-size: 13px;
  color: #5f6368;
}
</style>

